<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>我的积分</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		.aui-content {
			padding: 0 0.5rem;
		}

		.moneyBox {
			padding: 1.2rem 2rem;
		}

		.num {
			font-weight: bold;
			font-size: 1.2rem;
			text-align: center;
		}

		.getNum {
			color: #FF8028;
			border: 1px solid #FFC9AE;
			height: 1.4rem;
			line-height: 1.4rem;
			border-radius: 0.2rem;
			padding-left: 0.6rem;
			background-color: rgba(255, 244, 235, 1);
		}

		.comGodList .inner {
			box-shadow: none;
		}

		.textBox {
			margin-top:-0.35rem;
			border: 1px solid #DBDBDB;
			border-top: none;
			border-bottom-left-radius: 0.25rem;
			border-bottom-right-radius: 0.25rem;
		}

		.yo {
			color: #E73350;
			font-size: 1rem;
		}

		.yo span {
			font-size: 0.4rem
		}

		.comGodList .textBox {
			padding: 0.35rem 0.35rem 0.65rem;
		}

		.comGodList .btmInfo {
			padding: 0.2rem 0 0;
		}

		.comGodList .title {
			height: 1rem;
		}
		.cartBox{
			position: fixed;
			left: 0.6rem;
			bottom: 3.5rem;
			width: 2.8rem;
			height: 2.8rem;
		}
		.cart {
			height: 2.4rem;
			width: 2.4rem;
			border-radius: 50%;
			background-color: #010101;
			box-shadow: 0px 0.15rem 0.2rem 0px rgba(0, 0, 0, 0.2);
			text-align: center;
			line-height: 2.4rem;
			color: #fff;
		}

		.aui-badge {
			top: 0;
			right: 0rem;
			width: 1rem;
			height: 1rem;
			line-height: 1rem;
			border-radius: 50%;
			/*font-size: 0.4rem;
			background-color: #E73450 !important;*/
		}
	</style>
</head>

<body>
	<div class="aui-content">

		<div id="Ucion_html"></div>
		<script type="text/x-dot-template" id="Ucion_tpl">
			<div class="moneyBox aui-flex-col aui-flex-between">
				<div>
					<div class="num" id="Ucion">{{=it.user_coin || '0'}}</div>
					<div class="tex">可用积分</div>
				</div>
				<div>
					<div class="num" id="getUcion">{{=it.gain_coin || '0'}}</div>
					<div class="tex">本月获取</div>
				</div>
				<div tapmode onclick="openFlow()">
					<div class="num" id="payUcion">{{=it.pay_coin || '0'}}</div>
					<div class="tex">本月消费</div>
				</div>
			</div>
		</script>
		<!-- <div class="aui-px-10">
			<div class="getNum"><span>2018.11.28 23:12  </span>获得积分奖励0个</div>

		</div> -->
	</div>

	<div class="comFlowBox">
		<div class="comGodList" id="money_html">
			<div class="grid-sizer"></div>

		</div>
	</div>
	<script type="text/x-dot-template" id="money_tpl">
		{{ for(var i in it){ }}
			<div class="item" data-id="{{= it[i].goods_id}}" tapmode onClick="openUbiDetail({{= it[i].goods_id}});">
				<div class="inner">
					<div class="photo"><img src="{{=it[i].goods_cover}}" alt=""></div>
					<div class="textBox">
						<div class="title aui-flex-col aui-flex-middle">
							<div class="aui-ellipsis-2">{{=it[i].goods_name}}</div>
						</div>
						<div class="yo">{{=it[i].goods_sale_price}}<span>积分</span></div>
						<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
							<div class="color-555">价值<s>￥{{=it[i].goods_market_price}}</s></div>
							<div></div>
							<div class="aui-font-size-10 color-ad">{{=it[i].goods_stock}}人已兑换</div>
						</div>
					</div>
				</div>
			</div>
		{{ } }}
	</script>
<div class="cartBox" tapmode onclick="open biCart()">
	<div class="cart">
		<span class="aui-iconfont aui-icon-cart aui-font-size-17"></span>
		<div class="aui-badge cartBadge">0</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
	var gridDom = '#money_html';
	var grid;
	var isLoading = false;
	var loadFlag = true;
	var pageSize = 50;
	var currentPage = 1;
	var postData = {}
	apiready = function() {
		api.parseTapmode();
		// 监听到达底部
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 0
			}
		}, function(ret, err) {
			getData();
		});
		getData();
		getUcion()
		cartUcionDot();
		api.addEventListener({
				name: 'cartDotEvent'
		}, function(ret, err){
				cartUcionDot();
		});
	};

	function getUcion(){
		api.ajax({
		    url: BASE_URL + 'App/User/getUCion',
		    method: 'post',
		    data: {
		        values: {
		            userid: getUserId()
		        }
		    }
		},function(ret, err){
		    if (ret) {
					var tpl = $$('#Ucion_tpl').html();
					var tempFn = doT.template(tpl);
					$$('#Ucion_html').html(tempFn( ret ));
					api.parseTapmode();
		    } else {
		        alert( JSON.stringify( err ) );
		    }
		});
	}
	//调用瀑布流
	grid = new Masonry(gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded(gridDom, function() {
		grid.layout();
	});
	//瀑布流
	function getFlow(flowData) {
		var tpl = $$('#money_tpl').html();
		var tempFn = doT.template(tpl);
		var elem = $$(tempFn(flowData));
		if (currentPage == 1) {
			$$('#money_html').html('<div class="grid-sizer"></div>');
		}
		$$(gridDom).append(elem);
		grid.appended(elem);
		imagesLoaded(gridDom, function() {
			grid.layout();
		});
		// api.parseTapmode();
	}

	function getData() {
		showProgress();
		isLoading = true;
		postData.type = 3;
		postData.pageNo = currentPage;
		postData.pageSize = pageSize;
		api.ajax({
			url: BASE_URL_2 + 'App/Mall/goodsLists',
			method: 'post',
			data: {
				values: postData
			}
		}, function(ret, err) {
			if (ret) {
				if (ret.code == 1 && ret.data.length > 0) {
					// $$('.notData').addClass('aui-hide');
					getFlow(ret.data);
					currentPage++;
					api.parseTapmode();
					//如果加载出来的数量 小于 pagesize 说明到底线了
					if (ret.data.length < postData.pageSize) {
						loadFlag = false;
					}
				} else {
					if (currentPage == 1) {
						$$('#money_html').html('');
						// $$('.notData').removeClass('aui-hide');
					}
					loadFlag = false;
				}
			}
			isLoading = false;
			hideProgress();
		});
	}

	function openFlow() {
		api.openWin({
			name: 'trading_flow_win',
			url: 'trading_flow_win.html'
		});

	}
</script>

</html>
